import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import DescriptionList from '@/components/DescriptionList';
import { Card, List, Avatar } from 'antd';
import icon from '../config/icon.png';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Workplace.less';

const { Description } = DescriptionList;

@connect()
class Workplace extends PureComponent {
  renderActivities() {
    const {
      activities: { list },
    } = this.props;
    return list.map(item => {
      const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
        if (item[key]) {
          return (
            <a href={item[key].link} key={item[key].name}>
              {item[key].name}
            </a>
          );
        }
        return key;
      });
      return (
        <List.Item key={item.id}>
          <List.Item.Meta
            avatar={<Avatar src={item.user.avatar} />}
            title={
              <span>
                <a className={styles.username}>{item.user.name}</a>
                &nbsp;
                <span className={styles.event}>{events}</span>
              </span>
            }
          />
        </List.Item>
      );
    });
  }

  render() {
    const pageHeaderContent = (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src={icon} />
        </div>
        <div className={styles.content}>
          <div className={styles.contentTitle}>欢迎登陆,祝您开心每一天！</div>
          <div>{moment(new Date()).format('YYYY-MM-DD hh:mm:ss')}</div>
        </div>
      </div>
    );

    return (
      <PageHeaderWrapper content={pageHeaderContent}>
        <Card bordered={false}>
          <DescriptionList size="large" title="" style={{ marginBottom: 32 }}>
            <Description term="" />
            <Description term="" />
            <Description term="" />
            <Description term="" />
          </DescriptionList>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Workplace;
